import GraphBack from '../../src'
function draw() {
  document.querySelectorAll('.graph-background').forEach((ele) => drawBackground(ele))
}
window.addEventListener('resize', () => draw())

function drawBackground(ele) {
  const board = new GraphBack.Board(ele, { create: true, color: '#235fa7', lineWidth: 3 })
  const w = board.width
  const h = board.height
  const pointStr1 = `8,${h * 0.4} 8,3 ${w * 0.4 + 7},3`
  const pointStr2 = `8,${h * 0.15} 8,3 ${w * 0.1 + 7},3 ${w * 0.1},8 14,8 14,${h * 0.15 - 7}`
  const pointStr3 = `${w * 0.5},3 ${w - 3},3,${w - 3},${h * 0.25}`
  const pointStr4 = `${w * 0.52},3 ${w * 0.58},3 ${w * 0.58 - 7},9 ${w * 0.52 + 7},9`
  const pointStr5 = `${w * 0.9},3 ${w - 3},3 ${w - 3},${h * 0.1} ${w - 9},${h * 0.1 - 7} ${w - 9},9 ${w * 0.9 + 7},9`
  const pointStr6 = `8,${h * 0.5} 8,${h - 3} ${w * 0.3 + 7},${h - 3}`
  const pointStr7 = `8,${h * 0.55} 8,${h * 0.7} 2,${h * 0.7 - 7} 2,${h * 0.55 + 7}`
  const pointStr8 = `${w * 0.35},${h - 3} ${w - 3},${h - 3} ${w - 3},${h * 0.35}`
  const pointStr9 = `${w * 0.92},${h - 3} ${w - 3},${h - 3} ${w - 3},${h * 0.8} ${w - 9},${h * 0.8 + 7} ${w - 9},${
    h - 9
  } ${w * 0.92 + 7},${h - 9}`
  const paths = [
    { path: pointStr1, close: false, fill: false },
    { path: pointStr2, close: true, fill: true },
    { path: pointStr3, close: false, fill: false },
    { path: pointStr4, close: true, fill: true },
    { path: pointStr5, close: true, fill: true },
    { path: pointStr6, close: false, fill: false },
    { path: pointStr7, close: true, fill: true },
    { path: pointStr8, close: false, fill: false },
    { path: pointStr9, close: true, fill: true }
  ]
  for (let i = 0; i < paths.length; i++) {
    const { path, close, fill } = paths[i]
    const points = path.split(' ').map((item) => item.split(','))
    let graph = null
    if (fill) graph = new GraphBack.Polygon({ points, close })
    else graph = new GraphBack.Polyline({ points, close })
    board.add(graph)
  }
  board.render()
}
